<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Brennan Wu">
    
    <title>
        
            100+前端工具和网站推荐 |
        
        Brennan&#39;s Blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"All the way adhere to the people,and the mountains are the most beautiful scenery","description2":"一路坚持的人，都和山色一样是最美的景"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":false}}},"local_search":{"enable":true,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":true},"version":"3.4.3"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Brennan&#39;s Blog
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">100+前端工具和网站推荐</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Brennan Wu</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2021-10-31 06:59:36
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF%E6%94%B6%E8%97%8F%E7%BD%91%E5%9D%80/">前端收藏网址</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E5%B7%A5%E5%85%B7-%E7%BD%91%E7%AB%99/">工具 网站</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="01-JavaScript"><a href="#01-JavaScript" class="headerlink" title="01.JavaScript"></a>01.JavaScript</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://wangdoc.com/javascript/" >JavaScript 教程 | 通俗易懂的JavaScript教程<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/" >ES6 入门教程 | 通俗易懂的ES6入门教程<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://javascript30.com/" >JavaScript 30  |  使用原生JavaScript在30天内完成30个项目<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://zh.javascript.info/" >现代 JavaScript 教程 |  最近很流行的JavaScript教程<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://blog.poetries.top/node-learning-notes/" >Node.js学习指南 | 系统的Node.js学习教程和笔记系统整理<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/ryanmcdermott/clean-code-javascript" >JS 代码规范 | 优秀的 JS代码规范<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/xcatliu/typescript-tutorial" >TypeScript 教程 | 通俗易懂的TypeScript教程<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://jspang.com/detailed?id=63" >TypeScript 教程 |  最好的TypeScript 视频+图文教程<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="02-CSS样式"><a href="#02-CSS样式" class="headerlink" title="02.CSS样式"></a>02.CSS样式</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://lhammer.cn/You-need-to-know-css/#/zh-cn/" >CSS Tricks 效果大全 | CSS的各种效果实现 有很多动画效果<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/chokcoco/CSS-Inspiration" >CSS Inspiration |  CSS灵感的诞生地  我每天都的网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/QiShaoXuan/css_tricks" > CSS 常用样式 |  有很多常用的CSS样式<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://animista.net/" > Animista | CSS动画库  主打按需定制CSS动画效果<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://animista.net/" > Animista | CSS动画库  主打按需定制CSS动画效果<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://cssminifier.com/" > CSS Minifier | 在线CSS代码简化/压缩工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://sass.bootcss.com/documentation" > Sass: Sass 文档 | Sass 中文网  成熟、稳定、强大的CSS扩展语言<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://less.bootcss.com/" > Less 快速入门 | Less.js 中文文档 将CSS赋予了动态语言特性的样式语言<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://stylus-lang.com/" > stylus | CSS扩展  富有变现里、动态、健壮的CSS<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="03-算法数据"><a href="#03-算法数据" class="headerlink" title="03.算法数据"></a>03.算法数据</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="http://github.com/trekhleb/javascript-algorithms" > JavaScript 算法与数据结构 | 多种基于JavaScript的算法与数据结构<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/azl397985856/leetcode" > leetcode 解题之路 |  私藏LeetCode解题攻略 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/MisterBooo/LeetCodeAnimation" > 五分钟学算法 |  每天拿出五分钟  学学算法  比如上个厕所就学了 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/biaochenxuying/blog/issues/43" >数据结构与算法项目推荐 | Github上170K+Star的前端学习数据结构和算法题目 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/biaochenxuying/blog/issues/42" >JavaScript  十大经典排序算法 | JavaScript排序必会题目  作者功力很深 值得学习 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/algorithm-visualizer/algorithm-visualizer" >算法可视化工具 |  用可视化工具和交互方式 让你从代码中可视化算法 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://visualgo.net/en" >算法可视化来源 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/skidding/illustrated-algorithms" >算法的工作方式 | 变量和操作的可视化表示 增强了控制流和实际源代码 <i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="04-前端面试"><a href="#04-前端面试" class="headerlink" title="04.前端面试"></a>04.前端面试</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://blog.poetries.top/FE-Interview-Questions/" >前端面试常考问题整理 |  按模块和知识点分类<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions" >前端开发面试题<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/" >WEB前端面试宝典<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md" >掘金前端面试题合集<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://yuchengkai.cn/" >前端面试图谱<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/biaochenxuying/blog/issues/47" >前端面试开源项目汇总 | Github上100K+ Star 的前端面试开源项目汇总<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="05-技术社区"><a href="#05-技术社区" class="headerlink" title="05.技术社区"></a>05.技术社区</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/" >GitHub  |  高质量内容创作和分享平台<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://stackoverflow.com/" >Stackoverflow |一个回答技术问题的网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/" >掘金 | 国内的很多优质前端文章都掘金<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.cnblogs.com/" >博客园  | 一个很纯粹的技术博客平台<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.zhihu.com/" >知乎 |  很多程序人喜欢泡在知乎<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.csdn.net/" >CSDN  | 老牌社区  程序员必上的一个社区<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.v2ex.com/" >v2ex  | 程序员分享和探索的社区<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://segmentfault.com/" >segmentfault  | 低调技术博客社区<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://cnodejs.org/" >Node.js 中文社区 |  node专业中文社区<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.smashingmagazine.com/" >博客杂志站点 | 一个 web 技术类的博客杂志站点<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.jstips.co/" >JS 技术的网站 | 每天推出一个JS技巧的网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.jstips.co/" >W3Cplus | 推广国内行业的技术博客<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://docschina.org/" >印记中文 | 最权威的技术中文文档社区<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="06-前端博客"><a href="#06-前端博客" class="headerlink" title="06.前端博客"></a>06.前端博客</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://jspang.com/" >技术胖博客 |  专注前端 每年100集免费前端视频<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://www.alloyteam.com/" >腾讯Alloy Team  | 腾讯前端博客 每天必看<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://isux.tencent.com/" >腾讯用户体验博客 | 专注于前端用户体验<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://fed.taobao.org/" >淘系前端博客 |  淘宝前端博客 代表中国最强前端实力<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://aotu.io/" >京东凹凸实验室  |  京东前端技术博客<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/ElemeFE" >饿了么前端博客  |  知乎上的最强前端博客<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="http://fex.baidu.com/" >百度前端博客  |  百度前端团队旗下博客<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://75.team/" >360奇舞团  |  360公司前端团队<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://tech.meituan.com/" >美团技术博客  |  美团技术团队博客<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="07-构建工具"><a href="#07-构建工具" class="headerlink" title="07.构建工具"></a>07.构建工具</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.npmjs.com/" >NPM |  包管理 和 项目构建工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://webpack.js.org/" >webpack  | 前端最流行的项目构建工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://yarnpkg.com/" >Yarn  |  后起之秀 优秀的包管理和构建工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.gulpjs.com.cn/" >Gulp  |  老牌构建工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://babeljs.io/" >Babel  | ES6构建转换工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://cn.eslint.org/" >ESLint  | 可组装的JavaScript和JSX检查工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.postcss.com.cn/" >PostCSS | 用JavaScript转换CSS代码的工具<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="08-部署工具"><a href="#08-部署工具" class="headerlink" title="08.部署工具"></a>08.部署工具</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://pages.github.com/" >Github Page  | Github提供的免费静态网站托管服务<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.netlify.com/" >Netlify  |  30秒内部署你的网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://vercel.com/" >Vercel  |  快速部署你的网站 国外很流行<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://surge.sh/" >Surge  |  一个命令部署你的网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.heroku.com/" >Heroku  |  运动构建 、 运行你的网站和应用<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="09-静态站点搭建"><a href="#09-静态站点搭建" class="headerlink" title="09.静态站点搭建"></a>09.静态站点搭建</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" >Hexo  |  最流行的静态博客程序 Markdown编写 生成静态站点<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.vuepress.cn/" >VuePress  |  Vue驱动的静态网站生成器<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.gitbook.com/" >GitBook  | 现代化的文档平台，支持团队协作<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="10-前端代码规范"><a href="#10-前端代码规范" class="headerlink" title="10.前端代码规范"></a>10.前端代码规范</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://tgideas.qq.com/doc/index.html" >Tgideas | 腾讯前端代码规范 值得参考<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://guide.aotu.io/index.html" >京东  |  京东前端代码规范文档 分类详细<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://codeguide.bootcss.com/" >Bootstrap编码规范  |  适合个人和小团队使用的代码规范 不复杂<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/style" >ES6 编程风格  | 阮一峰编写的ES6代码规范  值得每个人阅读并参考<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://github.com/airbnb/javascript" >Airbnb  前端代码规范  |  国外企业的前端代码规范<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://eslint.org/" >ESLint  |  代码规范检查和格式化工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://prettier.io/" >Prettier  | VSCode 最热门的代码格式化工具  让你写出漂亮的代码<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="11-调试抓包"><a href="#11-调试抓包" class="headerlink" title="11.调试抓包"></a>11.调试抓包</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://wproxy.org/whistle/" >Whistle  |  代理抓包工具  我一直在用的工具 很好很强大<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.telerik.com/fiddler" >Fiddler  |  使用人数最多的抓包工具<i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="12-在线工具"><a href="#12-在线工具" class="headerlink" title="12.在线工具"></a>12.在线工具</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://codepen.io/" >CodePen  |  前端在线测试和演示工具  国外站点<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://caniuse.com/" >Can  I  use |  Web前端兼容性列表<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://tinypng.com/" >TinyPNG  |  PNG/JPG 图片在线压缩工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.umeng.com/" >CNZZ |  老牌站点统计工具  5年前国内站长必上网站<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://web.dev/measure/" >web.dev  |  评测网站性能  基于Lighthouse<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.shapedivider.app/" >Shape Divider  | 定制各种形状SVG的工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://gtmetrix.com/" >GTmetrix  |  网页性能在线分析工具<i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://carbon.now.sh/" >Carbon  |  代码转图片工具  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.wappalyzer.com/" >Wappalyzer  |  检测某个网站的技术栈  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://unbug.github.io/codelf" >CODEIF | 变量方法起名工具  人工智能加持  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://tool.lu/" > tool.lu  |  程序员在线工具大全   <i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="13-开发工具"><a href="#13-开发工具" class="headerlink" title="13.开发工具"></a>13.开发工具</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://code.visualstudio.com/" > VSCode  |  前端最流行的编辑器   <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.sublimetext.com/" > Sublime Text  |  轻量级代码编辑工具 曾经我的最爱   <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.jetbrains.com/webstorm/" > WebStom |  忠爱粉最多的编辑器 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://atom.io/" > Atom  |   用的人很多  我却不喜欢的编辑器 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.typora.io/" > Typora |  程序人Mrakdown笔记  一直在用的笔记工具 <i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="14-开发者大会"><a href="#14-开发者大会" class="headerlink" title="14.开发者大会"></a>14.开发者大会</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="https://fequan.com/" > Vue.js开发者大会 |  前端人必须关注的前端大会 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://jsconfchina.com/" > 中国JS开发者大会  |  公司每年必组织参加的技术大会 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://css.w3ctech.com/" > CSS开发者大会 |  提高CSS技术的开发者大会  打开视野 面向世界 <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.alibabaf2e.com/" > D2前端开发者大会 |  阿里组织的大会 可以看直播  <i class="fas fa-external-link-alt"></i></a></li>
</ul>
<h2 id="15-WEB图标"><a href="#15-WEB图标" class="headerlink" title="15.WEB图标"></a>15.WEB图标</h2><ul>
<li><a class="link"   target="_blank" rel="noopener" href="http://www.fontawesome.com.cn/" > Font Awesome  |  网站开发最流行的图标集  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://feathericons.com/" > Feather |  简洁美观的开源图标  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://material.io/resources/icons/" > Material  Design Icons  |  轻快、精美的符号图标  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://tablericons.com/" > Tabler Icons | 681枚可定制的开源SVG图标  <i class="fas fa-external-link-alt"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://simpleicons.org/" > 常见品牌的SVG图标  <i class="fas fa-external-link-alt"></i></a></li>
</ul>

        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/11/07/read-note2/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">解读《被讨厌的勇气》</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/10/27/work-norm1/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端协作规范</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Brennan Wu</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.3</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#01-JavaScript"><span class="nav-text">01.JavaScript</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#02-CSS%E6%A0%B7%E5%BC%8F"><span class="nav-text">02.CSS样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#03-%E7%AE%97%E6%B3%95%E6%95%B0%E6%8D%AE"><span class="nav-text">03.算法数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#04-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95"><span class="nav-text">04.前端面试</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#05-%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA"><span class="nav-text">05.技术社区</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#06-%E5%89%8D%E7%AB%AF%E5%8D%9A%E5%AE%A2"><span class="nav-text">06.前端博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#07-%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7"><span class="nav-text">07.构建工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#08-%E9%83%A8%E7%BD%B2%E5%B7%A5%E5%85%B7"><span class="nav-text">08.部署工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#09-%E9%9D%99%E6%80%81%E7%AB%99%E7%82%B9%E6%90%AD%E5%BB%BA"><span class="nav-text">09.静态站点搭建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83"><span class="nav-text">10.前端代码规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-%E8%B0%83%E8%AF%95%E6%8A%93%E5%8C%85"><span class="nav-text">11.调试抓包</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7"><span class="nav-text">12.在线工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7"><span class="nav-text">13.开发工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A"><span class="nav-text">14.开发者大会</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-WEB%E5%9B%BE%E6%A0%87"><span class="nav-text">15.WEB图标</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>



    
<script src="/js/local-search.js"></script>




    
<script src="/js/code-copy.js"></script>




    
<script src="/js/lazyload.js"></script>



<div class="post-scripts">
    
        
<script src="/js/left-side-toggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/toc.js"></script>

    
</div>



</body>
</html>
